<!-- 搜索表单 -->
<template>
  <ele-card :body-style="{ paddingBottom: '2px' }">
    <el-form label-width="72px" @keyup.enter="search" @submit.prevent="">
      <el-row :gutter="8">
        <el-col :lg="6" :md="12" :sm="12" :xs="24">
          <el-form-item label="姓名">
            <el-input
              clearable
              v-model.trim="form.name"
              placeholder="请输入姓名"
              @keyup.enter.native="search"
            />
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24">
          <el-form-item label="学号">
            <el-input
              clearable
              v-model.trim="form.code"
              placeholder="请输入学号"
              @keyup.enter.native="search"
            />
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24">
          <el-form-item label="毕业年份">
            <el-select
              v-model="form.graduationYear"
              multiple
              collapse-tags
              clearable
              style="margin-left: 0;"
              placeholder="请选择毕业年份">
              <el-option
                v-for="item in graduationYearOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24" v-show="showSearchParams">
          <el-form-item label="校区">
            <dict-data
              code="campus"
              v-model="form.campus"
              placeholder="请选择学生所属校区"
              multiple
              collapse-tags
            />
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24" v-show="showSearchParams">
          <el-form-item label="年级">
            <el-select
              v-model="form.grade"
              multiple
              collapse-tags
              clearable
              style="width: 100%;"
              placeholder="请选择学生年级">
              <el-option
                v-for="item in gradeOptions"
                :key="item.value"
                :label="item.label+'年'"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24" v-show="showSearchParams">
          <el-form-item label="系别">
            <el-select
              v-model="form.department"
              multiple
              collapse-tags
              clearable
              filterable
              style="width: 100%;"
              placeholder="请选择系别">
              <el-option
                v-for="item in departmentOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24" v-show="showSearchParams">
          <el-form-item label="专业">
            <el-select
              v-model="form.major"
              multiple
              collapse-tags
              clearable
              filterable
              style="width: 100%;"
              class="autoWidth-select"
              placeholder="请选择专业">
              <el-option
                v-for="item in majorOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24" v-show="showSearchParams">
          <el-form-item label="学籍状态">
            <el-select
              v-model="form.studyState"
              multiple
              collapse-tags
              clearable
              style="margin-left: 0px;"
              placeholder="请选择学籍状态">
              <el-option
                v-for="item in studyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24" v-show="showSearchParams">
          <el-form-item label="辅导员">
            <el-select
              v-model="form.counsellorCode"
              multiple
              collapse-tags
              clearable
              filterable
              style="width: 100%;"
              placeholder="请选择辅导员">
              <el-option
                v-for="item in userOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #999; font-size: 13px">{{ item.ext }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24" v-show="showSearchParams">
          <el-form-item label="总支">
            <dict-data
              code="organization"
              v-model="form.organization"
              placeholder="请选择校学生所属党总支"
              multiple
              collapse-tags
            />
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24" v-show="showSearchParams">
          <el-form-item label="困难类别">
            <el-select
              v-model="form.difficulty"
              clearable
              filterable
              style="margin-left: 0px;width: 100%;"
              placeholder="请选择困难类型">
              <el-option
                v-for="item in difficultyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24">
          <el-form-item label-width="16px">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
            &nbsp;&nbsp;<el-link @click="showSearchParams=!showSearchParams" type="success"
                                 class="showOrHid"
                                 :icon="showSearchParams?'el-icon-arrow-up':'el-icon-arrow-down'">
            显隐选项
          </el-link>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </ele-card>
</template>

<script setup>
import {useFormData} from '@/utils/use-form-data';
import {ref} from "vue";
import {
  getGraduationYear,
  getCampus,
  getStudyStatus,
  getDepartment,
  getMajor,
  getGrade,
  getDifficulty
} from "@/api/manage/statistic/admin/studentInfo/index.js";
import {selectCurrentYear} from "@/api/manage/statistic/admin/schoolInfo/index.js";
import {getUser} from "@/api/manage/statistic/admin/studentInfo/index.js"

const emit = defineEmits(['search']);

const showSearchParams = ref(false);

/** 表单数据 */
const [form, resetFields] = useFormData({
  // name: '',
  // code: '',
  // sex: '',
  // nation: '',
  // political: '',
  // campus: '',
  // grade: '',
  // department: '',
  // major: '',
  // majorDirection: '',
  // studyTime: '',
  // studyState: '',
  // counsellorCode: '',
  // graduationYear: '',
  // organization: '',
  // difficulty: ''
  name: null,//姓名
  code: null,//学号
  campus: null,//校区
  grade: null,//年级
  department: null,//系别
  major: null,//专业
  counsellorCode: null,//辅导员工号
  graduationYear: [],//毕业年份
  studyState: null,//学籍
});

/** 搜索 */
const search = () => {
  emit('search', {...form});
};

/**  重置 */
const reset = () => {
  resetFields();
  form.graduationYear.push(currentYear.value);
  search();
};

/**
 * 获取毕业年份列表
 * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
 */
const graduationYearOptions = ref([]);
const selectGraduationYear = () => {
  getGraduationYear().then(res => {
    graduationYearOptions.value = res.data;
  });
}

selectGraduationYear();
////////////////////////////////////////////////////////

//获取当前毕业年份
const currentYear = ref('');
const getCurrentYear = () => {
  selectCurrentYear().then(res => {
    currentYear.value = res;
    form.graduationYear.push(currentYear.value);
    search();
  });
}
getCurrentYear();

/**
 * 获取用户列表
 * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
 */
// const counsellorOptions = ref([]);
// const selectCounsellors = () => {
//   getCounsellors().then(res => {
//     counsellorOptions.value = res.data;
//   });
// }
// selectCounsellors();
////////////////////////////////////////////////////////


/**
 * 获取校区列表
 * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
 */
const campusOptions = ref([]);
const selectCampus = () => {
  getCampus().then(res => {
    campusOptions.value = res.data;
  });
}
selectCampus();
////////////////////////////////////////////////////////


/**
 * 获取学籍列表
 * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
 */
const studyOptions = ref([]);
const selectStudyStatus = () => {
  getStudyStatus().then(res => {
    studyOptions.value = res.data;
  });
}
selectStudyStatus();
////////////////////////////////////////////////////////

const departmentOptions = ref([]);
const selectDepartment = () => {
  getDepartment().then(res => {
    departmentOptions.value = res.data;
  })
}
selectDepartment();


const majorOptions = ref([]);
const selectMajor = () => {
  getMajor().then(res => {
    majorOptions.value = res.data;
  });
}
selectMajor();


const gradeOptions = ref([]);
const selectGrade = () => {
  getGrade().then(res => {
    gradeOptions.value = res.data;
  })
}
selectGrade();


const userOptions = ref([]);
const selectUser = () => {
  getUser().then(response => {
    userOptions.value = response.data;
  });
}
selectUser();


/**
 * 查询困难类别
 * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
 */
const difficultyOptions = ref([]);
const selectDifficulty = () => {
  getDifficulty().then(response => {
    difficultyOptions.value = response.data;
  });
}
selectDifficulty();
////////////////////////////////////////////////////////

</script>
